<template>
  <div class="detail">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="cart-o" size="18" @click="toCart" />
      </template>
    </van-nav-bar>
    <van-image width="100%" :src="product.coverImage | dalImg" />
    <p class="tit"><span class="sp">产地量贩</span>基地优选售后无忧</p>
    <div class="card">
      <span> {{ product.name }}</span>
      <p>{{ product.desc }}</p>
      <i>￥{{ product.price }} <span>/斤</span></i>
    </div>
    <div class="atten">
      <p>
        <van-icon
          name="balance-list-o"
          color="#0eb6ff"
          style="margin: 0 3vw"
        />商家24H发货，第三方物流配送，免运费
      </p>
      <p>
        <van-icon
          name="passed"
          color="#0eb6ff"
          style="margin: 0 3vw"
        />生鲜不支持7天无理由退货
      </p>
      <p>
        <van-icon
          name="gold-coin-o"
          color="#0eb6ff"
          style="margin: 0 3vw"
        />特价每人限购两份，超出不予配送
      </p>
      <p style="padding-left: 3vw">已选（单位：斤）</p>
    </div>
    <div class="appraise">
      <router-link :to="{ name: 'Appraise' }">
        <div class="to-all-appraise">
          <span style="flex: 1">评价（999+）</span>
          <span>查看全部</span>
          <van-icon name="arrow" style="font-size: 4vw" /></div
      ></router-link>
      <div class="appraise-card">
        <img
          src="https://img1.baidu.com/it/u=2330348875,2319148171&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
        />
        <div class="con">
          <div class="name">小浩</div>
          <div class="good">
            <van-icon name="star" color="gold" /><van-icon
              name="star"
              color="gold"
            /><van-icon name="star" color="gold" /><van-icon
              name="star"
              color="gold"
            /><van-icon name="star" color="gold" />
          </div>
          <div class="text">东西收到了,包装完好，物品很新鲜</div>
        </div>
        <span style="color: #999">2022.04.13</span>
      </div>
    </div>
    <div class="productDetail">
      <h2>商品详情</h2>
      <van-image width="80vw" :src="product.coverImage | dalImg" />
    </div>
    <van-popup v-model="show" position="bottom" style="width: 100%">
      <van-icon name="cross" style="float: right" @click="show = false" />
      <div class="select">
        <van-card
          :price="product.price + '/斤'"
          :title="product.name"
          :thumb="product.coverImage | dalImg"
        >
          <template #tags>
            <van-tag plain style="margin-top: 2vw">规格：（斤）</van-tag>
          </template>
        </van-card>
        <div class="same">商家24H发货，第三方物流配送，免运费</div>
        <div class="same">规格：（斤）</div>
        <div class="same">
          <span>购买数量</span>
          <div class="num">
            <span>
              <van-icon name="minus" @click="jian" />
            </span>
            <span class="num-span">{{ productNum }}</span>
            <span>
              <van-icon name="plus" @click="productNum++" />
            </span>
          </div>
        </div>
        <van-goods-action>
          <van-goods-action-button
            type="info"
            text="加入购物车"
            @click="addCart"
            style="height: 100%; width: 100%; border-radius: 0; margin: 0"
          />
        </van-goods-action>
      </div>
    </van-popup>
    <van-goods-action>
      <van-goods-action-button
        type="info"
        text="加入购物车"
        @click="show = true"
        style="height: 100%; width: 100%; border-radius: 0; margin: 0"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { loadProductByIdAPI } from "../services/products";
import { Toast } from "vant";
import { getToken } from "../Uitils/auth";
import { addCartAPI } from "../services/carts";
export default {
  data() {
    return {
      product: {},
      show: false,
      productNum: 1,
    };
  },
  async created() {
    const res = await loadProductByIdAPI(this.$route.params.id);
    this.product = { ...res.data };
    console.log(res);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toCart() {
      if (getToken()) {
        this.$router.push({ name: "Car" });
      } else {
        Toast("请先登录");
        this.$router.push({
          name: "Login",
        });
      }
    },
    jian() {
      if (this.productNum > 1) {
        this.productNum--;
      }
    },
    addCart() {
      if (getToken()) {
        addCartAPI(this.product.id, this.productNum).then((res) => {
          console.log(res);
          Toast(res.msg);
          this.show = false;
        });
      } else {
        Toast("请先登录");
        this.$router.push({
          name: "Login",
        });
      }
    },
  },
};
</script>

<style scoped>
.detail {
  font-size: 4vw;
}
.productDetail {
  width: 100vw;
  height: 120vw;
  box-sizing: border-box;
  padding: 10vw;
  background-color: red;
  margin-bottom: 10vw;
}
.productDetail h2 {
  height: 10vw;
  line-height: 10vw;
  color: white;
  text-align: center;
  margin-bottom: 10vw;
}
.tit {
  height: 10vw;
}
.sp {
  padding: 1vw;
  background-color: #0eb6ff;
  color: white;
  border-radius: 1vw;
  margin: 0 2vw;
}
.card {
  padding: 2vw;
  display: flex;
  flex-direction: column;
}
.card i {
  font-style: normal;
  color: red;
}
.card p {
  font-size: 3vw;
  color: #999;
  margin: 2vw 0;
}
.card i span {
  color: black;
  font-size: 3vw;
}
.atten p {
  background-color: #eee;
  margin: 2vw;
  height: 8vw;
  line-height: 8vw;
}
.appraise {
  background-color: #eee;
  margin: 0 2vw;
  padding: 0 5vw;
}
.to-all-appraise {
  padding: 2vw 0;
  display: flex;
  line-height: 4vw;
  justify-content: space-between;
  border-bottom: 1px solid #999;
}
.appraise-card {
  display: flex;
  justify-content: space-between;
  padding: 5vw 0;
  margin-bottom: 2vw;
}
.con {
  flex: 1;
  padding-left: 2vw;
}
.appraise-card img {
  height: 10vw;
  border-radius: 100%;
}
.select {
  height: 60vh;
  margin-top: 5vh;
  padding: 1vh 5vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.same {
  height: 8vh;
  line-height: 8vh;
  display: flex;
  justify-content: space-between;
}
.num-span {
  display: inline-block;
  width: 4vw;
  height: 4vw;
  border: 0;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
}
.num {
  width: 12vw;
  height: 4vw;
  display: flex;
  padding: 4vw 0;
}
.num span {
  width: 4vw;
  height: 4vw;
  box-sizing: border-box;
  border: 1px solid #999;
  line-height: 4vw;
  text-align: center;
  font-size: 3vw;
}
</style>

